<template>
  <div class="addDoctor">
    <div class="container">
      <Form ref="formValidate" :model="formValidate" :label-width="40" label-position="left" :rules="ruleValidate">
        <Row>
          <Col span="24" class="left-part">
            <h2 class="title">基本信息</h2>
            <Row  style="margin: 0 15px" :gutter="32">
              <Col span="24" class="upload-wrapper baseInfo-lineOne" style="margin-bottom:20px">
                <label >头像：</label>
                <div class="upload-part" style="margin-top:20px">
                  <div
                    class="demo-upload-list"
                    v-for="(item,index) in uploadListAvatar"
                    :key="index"
                  >
                    <template v-if="mode !== 'review'">
                      <div v-if="item.status === 'finished'">
                        <img :src="fileBaseUrl + item.res.fileName" />
                        <div class="demo-upload-list-cover">
                          <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                          <Icon type="ios-trash-outline" @click.native="onremove('Avatar', item)"></Icon>
                        </div>
                      </div>
                      <div v-else>
                        <Progress :percent="item.percentage" hide-info></Progress>
                      </div>
                    </template>
                    <template v-else>
                      <div>
                        <img :src="fileBaseUrl + item.res.fileName" />
                        <div class="demo-upload-list-cover">
                          <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                        </div>
                      </div>
                    </template>
                  </div>
                  <Upload
                    v-show="uploadListAvatar.length ==0"
                    ref="uploadAvatar"
                    :headers="fromData"
                    :action="uploadUrl"
                    :default-file-list="defaultListAvatar"
                    :format="['jpg','jpeg','png']"
                    :on-format-error="uploadFormatErrorAvatar"
                    max-size="200"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="() => preview('Avatar')"
                    :data="uploadDataAvatar"
                    :on-success="(res, file) => handleSuccess(res, file, 'Avatar')"
                    :show-upload-list="noshow"
                    multiple
                    type="drag"
                  >
                    <!-- <Button v-if="mode !== 'review'" type="primary" class="button-upload">选择头像上传</Button> -->
                    <div v-if="mode !== 'review'" style="width: 98px;height:98px;line-height: 110px;background: #f6f6f6;">
                        <Icon type="ios-camera" size="40"></Icon>
                    </div>
                  </Upload>
                </div>
              </Col>
              <Col span="10">
                <!-- 所属医院 -->
                <!--  :mode="wyAccid && 'review'" -->
                <FormItem label="所属医院：" class="mock-require hongdian" :label-width="80">
                  <fourLevelLinkage
                    v-if="mode !== 'review' && identity!='5'" :authTimeDisabled="authTimeDisabled"
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    @changeHospital="changeHospital"
                    :province="province"
                    :city="city"
                    :area="area"
                    :hospital="hospital"
                    ref="fourLevelLinkage"
                  ></fourLevelLinkage>
                  <div v-if="mode == 'review' && identity!='5'" class="content">
                    <span>{{($store.getters.getProvinceList.filter(item => item.id == province)[0] || {}).name}}</span>
                    <span>{{($store.getters.getCityList(province).filter(item => item.id == city)[0] || {}).name}}</span>
                    <span>{{($store.getters.getAreaList(city).filter(item => item.id == area)[0] || {}).name}}</span>
                    <span>{{hospitalName}}</span>
                  </div>
                  <div class="content"  v-if="identity=='5' ">
                      <span>{{provinceName}}</span>
                      <span>{{cityName}}</span>
                      <span>{{areaName}}</span>
                      <span>{{hospitalName}}</span>
                  </div>
                </FormItem>
                <!-- 药师姓名 -->
                <FormItem label="姓名：" prop="name" :label-width="50" class="hongdian">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.name"
                    placeholder="请输入药师姓名"
                    style="width:100%"
                    maxlength="15"
                  ></Input>
                  <div v-else class="content">{{formValidate.name}}</div>
                </FormItem>
                <!-- 联系方式 -->
                <FormItem label="手机号：" prop="phone" :label-width="60" class="hongdian">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.phone"
                    placeholder="请输入药师联系方式"
                    maxlength="11"
                  ></Input>
                  <div v-else class="content">{{formValidate.phone}}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <FormItem label="药师职称：" prop="titleType" :label-width="75" class="hongdian">
                  <Select
                    v-if="mode !== 'review'"
                    v-model="formValidate.title"
                    placeholder="请选择药师职称"
                  >
                    <Option
                      v-for="item in titleList"
                      :value="item.dictType"
                      :key="item.dictType"
                      style="text-align:center"
                    >{{item.dictName}}</Option>
                  </Select>
                  <div
                    v-else
                    class="content"
                  >{{(titleList.filter((item) => formValidate.title === item.dictType)[0] || {}).dictName}}</div>
                </FormItem>
                <!-- 身份证号 -->
                <FormItem label="身份证号：" prop="idcard" :label-width="75" class="hongdian">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.idcard"
                    placeholder="请输入药师身份证号"
                    maxlength="18"
                  ></Input>
                  <div v-else class="content">{{formValidate.idcard}}</div>
                </FormItem>
                <!-- 联系方式 -->
                <FormItem label="民族：" prop="民族" :label-width="40">
                  <Select
                    v-if="mode !== 'review'"
                    v-model="formValidate.nation"
                    placeholder="请选择民族"
                  >
                    <Option
                      v-for="item in nationalityList"
                      :value="item.dictValue"
                      :key="item.dictName"
                      style="text-align:center"
                    >{{ item.dictName }}</Option>
                  </Select>
                  <div
                    v-else
                    class="content"
                  >{{(nationalityList.filter((item) => formValidate.nation === item.dictValue)[0] || {}).dictName}}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <!-- 是否驻店 -->
                <FormItem label="是否驻店：" :label-width="60">
                  <RadioGroup v-if="mode !== 'review'" v-model="formValidate.havStore">
                    <Radio value="0" label="0">否</Radio>
                    <Radio value="1" label="1">是</Radio>
                  </RadioGroup>
                  <div v-else class="content">{{['否', '是'][formValidate.havStore]}}</div>
                </FormItem>
                <!-- 性别 -->
                <FormItem label="性别：" prop="gender" :label-width="50" class="hongdian">
                  <RadioGroup v-if="mode !== 'review'" v-model="formValidate.gender">
                    <Radio :value="1" :label="1">男</Radio>
                    <Radio :value="2" :label="2">女</Radio>
                  </RadioGroup>
                  <div v-else class="content">{{['', '男', '女'][formValidate.gender]}}</div>
                </FormItem>
                <!-- 籍贯 -->
                <FormItem label="籍贯：">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.nativePlace"
                    placeholder="请输入籍贯"
                    maxlength="100"
                  ></Input>
                  <div v-else class="content">{{formValidate.nativePlace}}</div>
                </FormItem>
              </Col>
              <Col span="17">
                <!-- 住址 -->
                <FormItem label="住址：">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.address"
                    placeholder="请输入住址"
                    maxlength="100"
                  ></Input>
                  <div v-else class="content">{{formValidate.address}}</div>
                </FormItem>
              </Col>
              <Col span="10">
                <!-- 最高学历 -->
                <FormItem label="最高学历：" :label-width="60">
                  <Select
                    v-if="mode !== 'review'"
                    v-model="formValidate.highestEducation"
                    placeholder="请选择最高学历"
                  >
                    <Option
                      v-for="item in educationList"
                      :value="item.dictValue"
                      :key="item.dictValue"
                      style="text-align:center"
                    >{{ item.dictName }}</Option>
                  </Select>
                  <div
                    v-else
                    class="content"
                  >{{(educationList.filter((item) => formValidate.highestEducation === item.dictValue)[0] || {}).dictName}}</div>
                </FormItem>
                <FormItem label="专业："  style="width:50%">
                  <Select v-if="mode !== 'review'" v-model="formValidate.major" placeholder="请选择专业">
                    <Option
                      v-for="item in majorList"
                      :value="item.dictValue"
                      :key="item.dictValue"
                      style="text-align:center"
                    >{{ item.dictName }}</Option>
                  </Select>
                  <div v-else class="content">{{formValidate.major}}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <!-- 手机号 -->
                <FormItem label="毕业时间：" :label-width="60">
                  <DatePicker
                    v-if="mode !== 'review'"
                    type="date"
                    v-model="formValidate.graduationTime"
                    placeholder="请选择毕业时间"
                  ></DatePicker>
                  <div v-else class="content">{{formValidate.graduationTime}}</div>
                </FormItem>
                <!-- 手机号 -->
                <FormItem label="学位：">
                  <Select
                    v-if="mode !== 'review'"
                    v-model="formValidate.degree"
                    placeholder="请选择学位"
                  >
                    <Option
                      v-for="item in degreeList"
                      :value="item.dictValue"
                      :key="item.dictValue"
                      style="text-align:center"
                    >{{ item.dictName }}</Option>
                  </Select>
                  <div
                    v-else
                    class="content"
                  >{{(degreeList.filter((item) => formValidate.degree === item.dictValue)[0] || {}).dictName}}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <!-- 联系方式 -->
                <FormItem label="毕业学校：" :label-width="60">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.graduateSchool"
                    placeholder="请输入毕业学校"
                     maxlength="100"
                  ></Input>
                  <div v-else class="content">{{formValidate.graduateSchool}}</div>
                </FormItem>
                <!-- 联系方式 -->
                <FormItem label="毕业证号：" :label-width="60">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.graduationCard"
                    placeholder="请输入毕业证号"
                    maxlength="30"
                  ></Input>
                  <div v-else class="content">{{formValidate.graduationCard}}</div>
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col span="24" class="right-part">
            <h2 class="title">
              资质信息          
              <span class="tishi" style="margin: 0 15px"  v-if="mode !== 'review'">(注意：图片只能上传jpg格式，且文件大小不超过200KB)</span>   
            </h2>          
            <Row style="margin: 0 15px" :gutter="32">
              <Col span="8">
                <div class="type1">
                  <div style="font-weight:550;margin:10px 0;">
                    <span style="color:red">*</span>
                    药师资格证书：
                  </div>
                  <Row style="margin-left:25px">
                    <Col span="24">
                      <!-- 证书编号 -->
                      <FormItem
                        label="证书编号："
                        :prop="'certList.' + getItemIndexByType('1') + '.code'"
                        :rules="{required: true, message: '请填写证书编号', trigger: 'blur'}"
                        :label-width="75"
                        class="hongdian"
                      >
                        <Input
                          v-if="mode !== 'review'"
                          v-model="getItemByType('1').code"
                          placeholder="请输入证书编号"
                          maxlength="50"
                        ></Input>
                        <div v-else class="content">{{getItemByType('1').code}}</div>
                      </FormItem>
                    </Col>
                    <Col span="24">
                      <!-- 发证日期 -->
                      <FormItem label="批准日期：" :label-width="60">
                        <DatePicker
                          v-if="mode !== 'review'"
                          style="width: 100%;"
                          type="date"
                          v-model="getItemByType('1').details2"
                          placeholder="请选择发证日期"
                        ></DatePicker>
                        <div v-else class="content">{{getItemByType('1').details2?getItemByType('1').details2.substring(0,10):''}}</div>
                      </FormItem>
                    </Col>
                    <Col span="24">
                      <!-- 发证日期 -->
                      <FormItem label="发证日期：" :label-width="60">
                        <DatePicker
                          v-if="mode !== 'review'"
                          style="width: 100%;"
                          type="date"
                          v-model="getItemByType('1').details3"
                          placeholder="请选择签发日期"
                        ></DatePicker>
                        <div v-else class="content">{{getItemByType('1').details3?getItemByType('1').details3.substring(0,10):''}}</div>
                      </FormItem>
                    </Col>
                    <!-- 专业 -->
                    <Col span="24">
                      <FormItem
                        label="专业："  :label-width="50"
                        :prop="'certList.' + getItemIndexByType('1') + '.details1'"
                        :rules="{required: true, message: '请选择专业', trigger: 'change'}"
                        class="hongdian"
                      >
                        <Select
                          v-if="mode !== 'review'"
                          v-model="getItemByType('1').details1"
                          placeholder="请选择专业"
                        >
                          <Option
                            v-for="item in majorList"
                            :value="item.dictValue"
                            :key="item.dictValue"
                            style="text-align:center"
                          >{{ item.dictName }}</Option>
                        </Select>
                        <div v-else class="content">{{getItemByType('1').details1}}</div>
                      </FormItem>
                    </Col>
                    <div class="upload-wrapper">
                      <!-- <label style="width: 85px">证书图片：</label> -->
                      <div class="upload-part">
                        <div
                          class="demo-upload-list"
                          v-for="(item,index) in uploadList1"
                          :key="index"
                        >
                          <template v-if="mode !== 'review'">
                            <div v-if="item.status === 'finished'">
                              <img :src="fileBaseUrl + item.res.fileName" />
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                <Icon type="ios-trash-outline" @click.native="onremove('1', item)"></Icon>
                              </div>
                            </div>
                            <div v-else>
                              <Progress :percent="item.percentage" hide-info></Progress>
                            </div>
                          </template>
                          <template v-else>
                            <div>
                              <img :src="fileBaseUrl + item.res.fileName" />
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                              </div>
                            </div>
                          </template>
                        </div>
                        <Upload
                          v-show="uploadList1.length <3"
                          ref="upload1"
                          :headers="fromData"
                          :action="uploadUrl"
                          :default-file-list="defaultList"
                          :format="['jpg']"
                          :on-format-error="uploadFormatError"
                          max-size="200"
                          :on-exceeded-size="handleMaxSize"
                          :before-upload="() => preview('1')"
                          :data="uploadData"
                          :on-success="(res, file) => handleSuccess(res, file, '1')"
                          :show-upload-list="noshow"
                          multiple
                          type="drag"
                        >
                          <div v-if="mode !== 'review'" style="width: 90px;height:90px;line-height: 90px;">
                              <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                          </div>
                        </Upload>
                      </div>
                    </div>
                  </Row>
              </div>
              </Col>
              <Col span="8">
                <div class="type2">
                  <div style="font-weight:550;margin:10px 0;">
                    <span style="color:red">*</span>
                    药师执业证书：
                  </div>
                  <Row style="margin-left:25px">
                    <Col span="24">
                      <!-- 证书编号 -->
                      <FormItem
                        label="注册证编号："
                        :prop="'certList.' + getItemIndexByType('2') + '.code'"
                        :rules="{required: true, message: '请填写证书编号', trigger: 'change'}"
                        :label-width="90"
                        class="hongdian"
                      >
                        <Input
                          v-if="mode !== 'review'"
                          v-model="getItemByType('2').code"
                          placeholder="请输入证书编号"
                          maxlength="50"
                        ></Input>
                        <div v-else class="content">{{getItemByType('2').code}}</div>
                      </FormItem>
                    </Col>
                    <Col span="24">
                      <!-- 证书编号 -->
                      <FormItem
                        label="资格证书号："
                        :prop="'certList.' + getItemIndexByType('2') + '.details1'"
                        :rules="{required: true, message: '请填写证书编号', trigger: 'change'}"
                        :label-width="90"
                        class="hongdian"
                      >
                        <Input
                          v-if="mode !== 'review'"
                          v-model="getItemByType('2').details1"
                          placeholder="请输入证书编号"
                          maxlength="50"
                        ></Input>
                        <div v-else class="content">{{getItemByType('2').details1}}</div>
                      </FormItem>
                    </Col>
                    <Col span="24">
                      <!-- 发证日期 -->
                      <FormItem label="发证日期：" :label-width="60">
                        <DatePicker
                          v-if="mode !== 'review'"
                          style="width: 100%;"
                          type="date"
                          v-model="getItemByType('2').details2"
                          placeholder="请选择发证日期"
                        ></DatePicker>
                        <div v-else class="content">{{getItemByType('2').details2?getItemByType('2').details2.substring(0,10):''}}</div>
                      </FormItem>
                    </Col>
                    <Col span="24">
                      <!-- 发证日期 -->
                      <FormItem label="有效期至：" :label-width="60">
                        <DatePicker
                          v-if="mode !== 'review'"
                          style="width: 100%;"
                          type="date"
                          v-model="getItemByType('2').details3"
                          placeholder="请选择有效期"
                        ></DatePicker>
                        <div v-else class="content">{{getItemByType('2').details3?getItemByType('2').details3.substring(0,10):''}}</div>
                      </FormItem>
                    </Col>
                    <div class="upload-wrapper">
                      <!-- <label style="width: 85px">证书图片：</label> -->
                      <div class="upload-part">
                        <div
                          class="demo-upload-list"
                          v-for="(item,index) in uploadList2"
                          :key="index"
                        >
                          <template v-if="mode !== 'review'">
                            <div v-if="item.status === 'finished'">
                              <img :src="fileBaseUrl + item.res.fileName" />
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                <Icon type="ios-trash-outline" @click.native="onremove('2', item)"></Icon>
                              </div>
                            </div>
                            <div v-else>
                              <Progress
                                v-if="item.showProgress"
                                :percent="item.percentage"
                                hide-info
                              ></Progress>
                            </div>
                          </template>
                          <template v-else>
                            <div>
                              <img :src="fileBaseUrl + item.res.fileName" />
                              <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                              </div>
                            </div>
                          </template>
                        </div>
                        <Upload
                          v-show="uploadList2.length <3"
                          ref="upload2"
                          :headers="fromData"
                          :action="uploadUrl"
                          :default-file-list="defaultList"
                          :format="['jpg']"
                          :on-format-error="uploadFormatError"
                          max-size="200"
                          :on-exceeded-size="handleMaxSize"
                          :before-upload="() => preview('2')"
                          :data="uploadData"
                          :on-success="(res, file) => handleSuccess(res, file, '2')"
                          :show-upload-list="noshow"
                          multiple
                          type="drag"
                        >
                          <div v-if="mode !== 'review'" style="width: 90px;height:90px;line-height: 90px;">
                            <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                        </div>
                        </Upload>
                      </div>
                    </div>
                  </Row>
              </div>
            </Col>
            <Col span="8">
              <div class="type3">
                <div style="font-weight:550;margin:10px 0;">
                    <span style="color:red"></span>
                    其他证书：
                  </div>
                  <Col style="margin-left:25px">
                    <!-- <FormItem label="其他证书说明：" :label-width="100"> -->
                      <Input
                        v-if="mode !== 'review'"
                        v-model="getItemByType('3').code"
                        type="textarea"
                        :autosize="{minRows: 2,maxRows: 5}"
                        placeholder="请输入其他证书说明"
                        maxlength="50"
                      ></Input>
                      <div v-else class="content">{{getItemByType('3').code}}</div>
                    <!-- </FormItem> -->
                  </Col>
                  <div class="upload-wrapper" style="margin-top:20px;margin-left:15px">
                    <!-- <label style="width: 85px">证书图片：</label> -->
                    <div class="upload-part">
                      <div class="demo-upload-list" v-for="(item,index) in uploadList3" :key="index">
                        <template v-if="mode !== 'review'">
                          <div v-if="item.status === 'finished'">
                            <img :src="fileBaseUrl + item.res.fileName" />
                            <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                              <Icon type="ios-trash-outline" @click.native="onremove('3', item)"></Icon>
                            </div>
                          </div>
                          <div v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                          </div>
                        </template>
                        <template v-else>
                          <div>
                            <img :src="fileBaseUrl + item.res.fileName" />
                            <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                            </div>
                          </div>
                        </template>
                      </div>
                      <Upload
                        v-show="uploadList3.length <3"
                        ref="upload3"
                        :headers="fromData"
                        :action="uploadUrl"
                        :default-file-list="defaultList"
                        :format="['jpg']"
                        :on-format-error="uploadFormatError"
                        max-size="200"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="() => preview('3')"
                        :data="uploadData"
                        :on-success="(res, file) => handleSuccess(res, file, '3')"
                        :show-upload-list="noshow"
                        multiple
                        type="drag"
                      >
                        <div v-if="mode !== 'review'" style="width: 90px;height:90px;line-height: 90px;">
                            <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                        </div>
                      </Upload>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
          <Col span="24" class="left-part">
            <h2 class="title">药师简介</h2>
            <Row style="margin: 0 15px">
              <Col span="24">
                <!-- 医生擅长 -->
                <div style="font-weight:550;margin-bottom: 10px;">
                  药师擅长：
                </div>
                <FormItem style="margin-bottom:15px">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.doctorGood"
                    type="textarea"
                    :autosize="{minRows: 2,maxRows: 5}"
                    placeholder="请输入医生擅长信息，便于平台推荐。"
                    maxlength="500" show-word-limit
                  ></Input>
                  <div v-else class="content">{{formValidate.doctorGood}}</div>
                </FormItem>
              </Col>
              <Col span="24">
                <!-- 药师简介 -->
                <div style="font-weight:550;margin-bottom: 10px;">
                  个人简介：
                </div>
                <FormItem>
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.personalIntroduction"
                    type="textarea" maxlength="1000"
                    :autosize="{minRows: 2,maxRows: 5}"
                    placeholder="请输入药师个人简介"
                  ></Input>
                  <div v-else class="content">{{formValidate.personalIntroduction}}</div>
                </FormItem>
              </Col>
            </Row>
          </Col> 
          <Col span="24" class="right-part">   
            <!-- 认证信息 -->
            <template>
              <h2 class="title">认证信息</h2>
              <Row style="margin: 0 40px"  v-if="mode !== 'edit'">
                <Col span="12" style="clear:none;" class="upload-wrapper">
                    <label style="width: 85px">身份证信息：</label>
                    <div class="upload-part">
                      <div
                        class="demo-upload-list"
                        v-for="(item,index) in uploadListIdCard"
                        :key="index"
                      >
                        <template>
                          <div>
                            <img :src="fileBaseUrl + item.res.fileName" />
                            <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                            </div>
                          </div>
                        </template>
                      </div>
                    </div>
                </Col>
                <Col span="12" style="clear:none;" class="upload-wrapper">
                    <label style="width: 85px">签名：</label>
                    <div class="upload-part">
                      <div
                        class="demo-upload-list"
                        v-for="(item,index) in uploadListSign"
                        :key="index"
                      >
                        <template>
                          <div>
                            <img :src="fileBaseUrl + item.res.fileName" />
                            <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                            </div>
                          </div>
                        </template>
                      </div>
                    </div>
                </Col>
              </Row>
              <Row style="margin-top:20px">
              <Col span="8">
                <FormItem v-if="mode !== 'review'">
                  <div class="main_yy">
                      <span class="main_yy_name">图文问诊：</span>
                      <iSwitch size="large"  v-model="iopenImagetext" >
                          <span slot="open">开启</span>
                          <span slot="close">关闭</span>
                      </iSwitch>
                  </div>
                </FormItem>
                <FormItem prop="" v-else>
                  <div class="main_yy">
                      <span style="font-size:14px">图文问诊：</span>
                      <iSwitch size="large"  v-model="iopenImagetext" disabled='true'>
                          <span slot="open">开启</span>
                          <span slot="close">关闭</span>
                      </iSwitch>
                  </div>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem v-if="mode !== 'review'">
                  <div class="main_yy">
                    <span style="font-size:14px">视频问诊：</span>
                    <iSwitch size="large"  v-model="iopenVideo" >
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </iSwitch>
                  </div>
                </FormItem>
                <FormItem prop="" v-else>
                  <div class="main_yy">
                      <span style="font-size:14px">视频问诊：</span>
                      <iSwitch size="large"  v-model="iopenVideo" disabled='true'>
                          <span slot="open">开启</span>
                          <span slot="close">关闭</span>
                      </iSwitch>
                  </div>
                </FormItem>
              </Col>
              <!-- <Col span="8">
                  <FormItem prop="" v-if="mode !== 'review'">
                    <div>
                      <span>是否开通远程门诊：</span>
                      <iSwitch size="large" v-model="iremote">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                      </iSwitch>
                    </div>
                  </FormItem>
                  <FormItem prop="" v-if="mode == 'review'">
                    <div>
                      <span>是否开通远程门诊：</span>
                      <iSwitch size="large" v-model="iremote" disabled='true'>
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                      </iSwitch>
                    </div>
                  </FormItem>
                </Col> -->
            </Row>
            </template>
          </Col>           
        </Row>
      </Form>
      <!-- 添加药师 -->
      <div class="btn-group">
        <Button
          type="primary"
          v-if="mode === 'add'"
          @click="handleConfirm('add')"
          class="btn"
        >
          <Icon type="ios-checkmark" style="margin-right: 5px" />提交
        </Button>
        <Button
          type="primary"
          v-if="mode === 'edit'"
          @click="handleConfirm('edit')"
          class="btn"
        >
          <Icon type="ios-checkmark" style="margin-right: 5px" />保存修改
        </Button>
        <template v-if="showReviewBtn && !jgtype">
          <Button type="primary" @click="reviewPass" class="btn">
            <Icon type="ios-checkmark" style="margin-right: 5px" />审核通过
          </Button>
          <Button type="primary" @click="reviewPassNo" class="btn">
            <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>审核不通过
          </Button>
        </template>
        <Button style="marginLeft: 20px" @click="back" class="btn">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
        </Button>
      </div>
    </div>

    <Modal
      title="审核提示："
      @on-cancel="cancel"
      v-model="reviewYesStatus"
      class="shenhe-vertical-center-modal"
    >
      <p>
        <i
          class="alert-icon"
          style="display:inline-block; vertical-align: middle; width:20px; height:20px; text-align:center; border-radius:50%; background:#f00; color:#ffffff; font-size:14px; line-height:20px;"
        >!</i>
        &nbsp;&nbsp;{{reviewMsg}}
      </p>
      <div class="btn-group" style="textAlign: center; paddingTop: 20px">
        <Button type="primary" style="marginLeft: 20px;width:75px;height:35px;" @click="ok">
          <Icon type="ios-checkmark" style="margin-right: 5px" />确认
        </Button>
        <Button style="marginLeft: 20px;width:75px;height:35px;" @click="cancel">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
        </Button>
      </div>
    </Modal>
    <Modal
      title="审核提示："
      :loading="loading"
      @on-cancel="cancel"
      v-model="reviewNoStatus"
      class="shenhe-vertical-center-modal"
    >
      <Row>
        <Col :xs="24" :mb="4">
          <i
            class="req-icon"
            style="font-size:18px; text-align:center; color:red; display:inline-block; height:18px; width:18px; line-height:18px; vertical-align: middle;"
          >*</i>不通过原因描述&nbsp;&nbsp;
          <span style="color:red">{{checkAlert}}</span>
        </Col>
        <Col :xs="24" :mb="20">
          <Form ref="formValue" :model="noMsg" :rules="ruleValue">
            <FormItem prop="reviewNoMsg">
              <Input
                class
                :autosize="{ minRows: 3, maxRows: 3 }"
                type="textarea"
                v-model="noMsg.reviewNoMsg"
                placeholder="请输入不通过原因"
                maxlength="100"
              />
            </FormItem>
          </Form>
        </Col>
      </Row>
      <Row>
        <Col :xs="24" :mb="4">备注</Col>
        <Col :xs="24" :mb="20">
          <Input
            class
            :autosize="{ minRows: 3, maxRows: 3 }"
            type="textarea"
            v-model="reviewNoRemark"
            placeholder="请输入备注"
            maxlength="100"
          />
        </Col>
      </Row>
      <div class="btn-group" style="textAlign: center; paddingTop: 20px">
        <Button
          type="primary"
          style="marginLeft: 20px;width:75px;height:35px;"
          @click="ok('formValue')"
        >
          <Icon type="ios-checkmark" style="margin-right: 5px;" />确认
        </Button>
        <Button style="marginLeft: 20px;width:75px;height:35px;" @click="cancel">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
        </Button>
      </div>
    </Modal>
    <Modal title="预览图片" width="30" v-model="viewModal" footer-hide>
      <div>
        <img :src="viewSrc" style="width: 100%" />
      </div>
    </Modal>
    <Spin v-if="showSpin" fix></Spin>
  </div>
</template>
<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import cookie from "../../../../utils/cookie.js";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import Utils from "@/utils";
import { DatePicker } from "view-design";
export default {
  components: {
    DatePicker,
    fourLevelLinkage
  },
  props: {
    mode: String,
    jgtype: [Number, String],
  },
  data() {
    return {
      //问诊方式
      iopenImagetext:false,
      iopenVoice:false,
      iopenVideo:false,

      showSpin: false,
      noshow: false,
      province: null,
      city: null,
      area: null,
      hospital: null,
      provinceName: null,
      cityName: null,
      areaName: null,
      detfaltList: [],
      btnLoading: false,
      formValidate: {
        // 头像
        docIcon: "",
        // 姓名
        name: null,
        // 性别
        gender: null,
        // 联系方式
        phone: null,
        // 民族
        nation: null,
        // 身份证号
        idcard: null,
        // 从业年限
        // workingYears: null,
        // 关联医院
        hospitalId: null,
        // 住址
        address: null,
        // 籍贯
        nativePlace: null,
        // 最高学历
        highestEducation: null,
        // 毕业时间
        graduationTime: null,
        // 毕业学校
        graduateSchool: null,
        // 专业
        major: null,
        // 毕业证号
        graduationCard: null,
        // 学位
        degree: null,
        // 个人简介
        personalIntroduction: null,
        // 资质信息
        certList: [
          {
            code: "", //证书编号
            details1: null, // 专业
            details2: null, // 批准日期
            details3: null, // 签发日期
            filePath: null,
            type: "1"
          },
          {
            code: null, //证书编号
            details1: null, // 资格证书号
            details2: null, // 发证日期
            details3: null, // 有效期至
            filePath: null,
            type: "2"
          },
          {
            code: null, // 证书说明
            filePath: null,
            type: "3"
          }
        ],

        // 职称
        titleType: null,
        // 科室
        // deptType: null,
        // 是否驻点
        havStore: null,
        type: 2,
      },
      ruleValidate: {
        name: [
          { required: true, message: "请输入药师姓名", trigger: "change" }
        ],
        gender: [
          { required: true, message: "请选择性别", type: 'number', trigger: "change" }
        ],
        phone: [
          {
            required: true,
            message: "请输入正确的联系方式",
            trigger: "change",
            pattern: Utils.pattern.phone
          }
        ],
        idcard: [
          { required: true, message: "请输入药师身份证号", trigger: "change", pattern: Utils.pattern.idCard }
        ],
        deptType: [
          { required: true, message: "请选择科室", trigger: "change" }
        ],
        title: [
          { required: true, message: "请选择药师职称", trigger: "change" }
        ]
      },
      wyAccid: '', // 云信id
      // 上传图片相关
      defaultList: [],
      uploadList: [],
      uploadModal: true,
      uploadData: { json: '{"urlCode":"' + code.urlCode.doctor + '"}' },
      uploadDataAvatar: { json: '{"urlCode":"' + code.urlCode.reviewAvatar + '"}' },
      uploadUrl: api.fileAll,
      images: "",
      sourceImages: "",
      imgName: "",
      visible: false,
      uploadList1: [], //type1
      uploadList2: [], //type2
      uploadList3: [], //type3
      uploadListAvatar: [],
      uploadListIdCard: [],
      uploadListSign: [],
      viewModal: false,
      viewSrc: null,
      // 审核相关
      showReviewBtn: false,
      reviewYesStatus: false,
      reviewNoStatus: false,
      reviewStatus: null,
      reviewMsg: "确认审核通过，是否继续？",
      reviewNoMsg: "",
      reviewNoRemark: "",
      noMsg: {
        reviewNoMsg: ""
      },
      ruleValue: {
        reviewNoMsg: [
          {
            required: true,
            message: "不通过原因不能为空",
            trigger: "blur"
          }
        ]
      },
      loading: false,
      /**
       * 下拉选项
       * **/
      departmentList: [], // 科室列表
      titleList: [], // 职称列表
      majorList: [], // 专业列表
      nationalityList: [], // 民族列表
      educationList: [], // 学历列表
      degreeList: [], // 学位列表
      authTimeDisabled: false,
      identity:'',
    };
  },
  created() {
    this._pageNo = this.$route.query.pageNo
      ? parseInt(this.$route.query.pageNo)
      : 1;
    this._province = this.$route.query.province
      ? parseInt(this.$route.query.province)
      : null;
    this._city = this.$route.query.city
      ? parseInt(this.$route.query.city)
      : null;
    this._area = this.$route.query.area
      ? parseInt(this.$route.query.area)
      : null;
    this._hospital = this.$route.query.hospital
      ? this.$route.query.hospital
      : null;
    this._searchKey = this.$route.query.searchKey
      ? this.$route.query.searchKey
      : "";
    this._dictType = this.$route.query.dictType
      ? this.$route.query.dictType
      : "";
    this._hospitalId = this.$route.query.hospitalId
      ? this.$route.query.hospitalId
      : "";
    this._authStatus =
      this.$route.query.authStatus == null
        ? null
        : parseInt(this.$route.query.authStatus);
    this.jgtype = this.$route.query.jgtype
  },
  mounted() {
    this.identity = cookie.getCookie("idtt");
    if(this.identity ==5){
      this.provinceName = cookie.getCookie("provinceName");
      this.cityName = cookie.getCookie("cityName");
      this.areaName = cookie.getCookie("districtName");
      this.hospitalName = cookie.getCookie("orgName");
    }
    // if (this.mode !== "review") {
      this.uploadList1 = this.$refs.upload1.fileList;
      this.uploadList2 = this.$refs.upload2.fileList;
      this.uploadList3 = this.$refs.upload3.fileList;
      this.uploadListAvatar = this.$refs.uploadAvatar.fileList;
    // }

    // 加载职称列表
    this.getTitleList();
    this.findDoctorDict();
    if (this.mode !== "add") {
      this.findKbaoOperateDoctorDtoById();
    }
  },
  methods: {
    ok(name) {
      let params = {},
        sMsg,
        fMsg;
      params.id = this.$route.query.id;
      params.authStatus = this.reviewStatus;
      params.iopenImagetext = Number(this.iopenImagetext)
      params.iopenVoice = Number(this.iopenVoice)
      params.iopenVideo = Number(this.iopenVideo)
      if (this.reviewStatus == 2) {
        sMsg = "审核通过成功";
        fMsg = "审核通过失败，请重试";
        this.review(params, sMsg, fMsg);
      } else if (this.reviewStatus == 3) {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.checkStatus = true;
            params.notPassingReasons = this.noMsg.reviewNoMsg;
            params.remarks = this.reviewNoRemark;
            sMsg = "审核不通过成功";
            fMsg = "审核不通过失败，请重试";
            this.review(params, sMsg, fMsg);
          } else {
          }
        });
      }
      return false;
    },
    cancel() {
      this.reviewYesStatus = false;
      this.reviewNoStatus = false;
      this.reviewStatus = null;
    },
    review(param, sMsg, fMsg) {
      this.loading = true;
      this.$axios
        .post(api.reviewDoctor, param)
        .then(resp => {
          if (resp.data.success) {
            this.$Message.success(sMsg);
            //   公用方法
            this.functionJS.queryNavgationTo(
              this,
              "/index/doctorOperation/doctorReview/list",
              {
                pageNo: this.pageNo,
                // province: this.province,
                // city: this.city,
                // area: this.area,
                // hospital: this.hospital,
                // searchKey: this.searchKey,
                // dictType: this.dictType,
                // authStatus: this.authStatus,
                isBack: 2
              }
            );
          } else {
            this.$Message.info(fMsg);
            this.reviewYesStatus = false;
            this.reviewNoStatus = false;
            this.reviewStatus = null;
          }
          this.loading = false;
        })
        .catch(err => {
          this.$Message.info("服务器连接超时，请重试");
          this.reviewYesStatus = false;
          this.reviewNoStatus = false;
          this.reviewStatus = null;
          this.loading = false;
        });
    },
    reviewPass() {
      this.reviewYesStatus = true;
      this.reviewStatus = 2;
    },
    reviewPassNo() {
      this.reviewNoStatus = true;
      this.reviewStatus = 3;
    },
    changeProvince(val) {
      this.province = val;
    },
    changeCity(val) {
      this.city = val;
    },
    changeArea(val) {
      this.area = val;
    },
    changeHospital(val) {
      if (!val && val !== 0) {
        this.formValidate.hospitalId = null;
        this.hospital = null;
        this.departmentList = [];
        return;
      }

      this.formValidate.hospitalId = String(val);
      this.hospital = val;
      if (Boolean(val)) {
        this.getDepartmentList(val);
      }
    },
    back() {
      if(this.jgtype == 'jianguan') {
        this.functionJS.queryNavgationTo(
          this,
          "/index/supervision/medicalSupervision/doctorlist",
          {
            pageNo: this._pageNo,
            hospitalId: this._hospitalId,
          }
        );
      } else {
        this.functionJS.queryNavgationTo(
          this,
          "/index/doctorOperation/doctorReview/list",
          {
            pageNo: this._pageNo,
            // province: this._province,
            // city: this._city,
            // area: this._area,
            // hospital: this._hospital,
            // searchKey: this._searchKey,
            // dictType: this._dictType,
            // authStatus: this._authStatus,
            // isBack: 2
          }
        );
      }
    },
    // 获取职称列表
    getTitleList() {
      this.$axios
        .post(api.findDoctorTitleListByDoctorType,{type: 2})
        .then(resp => {
          this.titleList = resp.data.object;
        })
        .catch(err => {
          console.log(err);
        });
    },
    findDoctorDict() {
      this.$axios
        .post(api.findDoctorDict,{})
        .then(resp => {
          if (resp.data.code == 1) {
            const resObj = resp.data.object;
            this.majorList = resObj.pharmacistmajorList;
            this.nationalityList = resObj.nationalityList;
            this.educationList = resObj.educationList;
            this.degreeList = resObj.degreeList;
          } else {
            this.$Message.error(resp.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 通过选择医院加载医院下科室
    getDepartmentList(hospitalId) {
      let url = api.querydeptname;
      let params = {
        hospitalId
      };
      this.packageAxios(this, url, params, res => {
        if (res.data.success) {
          let ret = res.data.object;
          this.departmentList = ret;
        } else {
          this.$Message.error("加载失败");
        }
      });
    },
    // 文件上传成功触发的函数
    handleSuccess(res, file, type) {
      res = this.uploadFileDecrypt(res);

      if (res.success) {
        file.res = res.object[0];
      } else {
        this.$Message.info("上传失败,请重试");
      }
    },
    preview(type) {
      if (type === "Avatar") {
        const check = this["uploadList" + type].length < 1;
        if (!check) {
          this.$Message.info("只能上传一张图片");
          return false;
        }
      }
    },
    onremove(type, file) {
      const fileList = this.$refs["upload" + type].fileList;
      this.$refs["upload" + type].fileList.splice(fileList.indexOf(file), 1);
    },
    getItemByType(type) {
      return this.formValidate.certList.filter(item => item.type == type)[0];
    },
    getItemIndexByType(type) {
      var resIndex;
      this.formValidate.certList.forEach((item, index) => {
        if (item.type == type) {
          resIndex = index;
        }
      });
      return resIndex;
    },
    // 上传图片大小错误提醒
    handleMaxSize() {
      this.$Message.error("上传图片大小不能超过200kb");
    },
    // 查看预览图片
    handleView(item) {
      this.viewModal = true;
      this.viewSrc = this.fileBaseUrl + item.res.fileName;
    },
    findKbaoOperateDoctorDtoById() {
      this.showSpin = true;
      let url = ''
      if(this.jgtype == 'jianguan') {
        url = api.findOperateSuperviseDoctorById
      } else {
        url = api.findKbaoOperateDoctorDtoById
      }
      this.$axios
        .post(url, { id: this.$route.query.id })
        .then(res => {
          if (res.data.code === 1) {
            // 利用返回数据填充 前端数据
            const resObj = JSON.parse(JSON.stringify(res.data.object));
            if(res.data.object && res.data.object.authTime){
              this.authTimeDisabled = true
            } else {
              this.authTimeDisabled = false
            }
            if (resObj.authStatus === "1" && this.mode === "review") {
              this.showReviewBtn = true;
            } else {
              this.showReviewBtn = false;
            }
            //对 resObj.certlist 进行 this.formValidate.certListmerge 进行merge 以兼容旧数据;
            this.iopenImagetext = Boolean(resObj.iopenImagetext)
            this.iopenVoice = Boolean(resObj.iopenVoice)
            this.iopenVideo = Boolean(resObj.iopenVideo)
            if(resObj.certList){
              this.formValidate.certList.forEach((item, index) => {
                resObj.certList[index] = Object.assign(
                  {},
                  item,
                  resObj.certList[index] || {}
                );
              });

              resObj.certList.forEach((item, index) => {
                if (item.filePath) {
                  item.filePath = JSON.parse(item.filePath);
                  if (!Array.isArray(item.filePath)) {
                    item.filePath = [item.filePath];
                  }
                  item.filePath.forEach((item2, index) => {
                    this.$refs['upload' + item.type].fileList.push({
                      status: "finished",
                      url: item2.fileName,
                      res: item2,
                      uid: index
                    });
                  });
                }
              });
            }
            // 头像
            try {
              if (resObj.docIcon) {
                const iconInfo = JSON.parse(resObj.docIcon);
                this.$refs.uploadAvatar.fileList.push({
                    status: "finished",
                    url: iconInfo.fileName,
                    res: iconInfo,
                    uid: 0
                  });
              }
            } catch (err) {
              this.$Message.error("头像解析错误");
            }
            // 身份证
            try {
              if (resObj.idcardFront) {
                const idcardFront = JSON.parse(resObj.idcardFront);
                this.uploadListIdCard.push({
                  status: "finished",
                  url: idcardFront.fileName,
                  res: idcardFront
                });
              }
              if (resObj.idcardBack) {
                const idcardBack = JSON.parse(resObj.idcardBack);
                this.uploadListIdCard.push({
                  status: "finished",
                  url: idcardBack.fileName,
                  res: idcardBack
                });
              }
            } catch (err) {
              this.$Message.error("身份证解析错误");
            }
            // 签名
            try {
              if (resObj.prescriptionSignature) {
                const prescriptionSignature = JSON.parse(
                  resObj.prescriptionSignature
                );
                this.uploadListSign.push({
                  status: "finished",
                  url: prescriptionSignature.fileName,
                  res: prescriptionSignature
                });
              }
            } catch (err) {
              this.$Message.error("身份证解析错误");
            }

            // 预留返回的有字段数据
            this.province = resObj.province;
            this.city = resObj.cityCode;
            this.area = resObj.areaCode;
            this.hospital = resObj.hospitalId;
            this.hospitalName = resObj.hospitalName;
            // 字段错误纠正（与提交数据字段不对应等问题）
            resObj.deptType = resObj.deptTypeId;
            this.wyAccid = resObj.wyAccid;
            // 删除多余字段 使其与要提交字段保持一直
            for (let i in resObj) {
              if (!this.formValidate.hasOwnProperty(i)) {
                delete resObj[i];
              }
            }

            // 兼容没有certlist的旧数据
            if (!resObj.certList || !resObj.certList.length) {
              resObj.certList = this.formValidate.certList;
            }
            Object.assign(this.formValidate, res.data.object);
            // 必须克隆certList否则提交的时候无法序列化
            // this.formValidate.certList = JSON.parse(JSON.stringify(this.formValidate.certList));
            if (this.hospital && this.mode !== "add") {
              this.getDepartmentList(this.hospital);
            }
          } else {
            this.$Message.error(res.data.message);
          }
          this.showSpin = false;
        });
    },

    handleConfirm(type) {
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          if (
            !this.formValidate.hospitalId &&
            this.formValidate.hospitalId !== 0
          ) {
            this.$Message.error("请选择所在医院");
            return false;
          }

          let url = "";
          if (type === "add") {
            url = api.insertKbadPharmacist;
          } else if (type === "edit") {
            url = api.updateKbadDoctor;
            this.formValidate.id = this.$route.query.id;
          }

          // 上传地址字段内容填充
          this.formValidate.certList.forEach((item, index) => {
            if (item.type == "3") {
              item.filePath = this["uploadList" + item.type].map(
                item => item.res
              );
            } else {
              item.filePath = this["uploadList" + item.type].map(
                item => item.res
              );
              item.details2 = Utils.getNowDateBySpecialFormat(item.details2);
              item.details3 = Utils.getNowDateBySpecialFormat(item.details3);
            }
          });
          this.formValidate.docIcon = this.uploadListAvatar.map(item => item.res)[0] ? JSON.stringify(this.uploadListAvatar.map(item => item.res)[0]) : '';
          this.titleList.forEach(i =>{
            if(i.dictType == this.formValidate.title){
                this.formValidate.titleName = i.dictName
            }
          })
          // 数据类型转换
          this.formValidate.graduationTime = Utils.getNowDateBySpecialFormat(
            this.formValidate.graduationTime
          );
          this.formValidate.hospitalid = this.formValidate.hospitalId;
          this.formValidate.iopenImagetext = Number(this.iopenImagetext),
          this.formValidate.iopenVoice = Number(this.iopenVoice),
          this.formValidate.iopenVideo = Number(this.iopenVideo),
          this.btnLoading = true;

          this.$axios
            .post(url, this.formValidate)
            .then(res => {
              if (res.data.success) {
                type === 'add' && this.$Message.success("添加成功");
                type === 'edit' && this.$Message.success("保存成功");
                this.back();
              } else {
                this.$Message.error(res.data.message);
              }
              this.btnLoading = false;
            })
            .catch(() => {
              this.btnLoading = false;
            });
        } else {
          this.$Message.error("请完整填写必填项!");
        }
      });
    },
    // 上传图片格式错误提醒
    uploadFormatError() {
      this.$Message.error("上传图片类型只能是jpg格式");
    },
    uploadFormatErrorAvatar() {
      this.$Message.error("上传图片类型只能是jpg/jpeg/png格式");
    }
  },
  watch: {}
};
</script>
<style lang="less" scoped>
.addDoctor {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
  /deep/ .ivu-form .ivu-form-item-label {
    padding-right: 0px;
  }
  .hongdian{
    margin-left:-10px
  }
  .left-part {
    width: 98%;
    margin: 20px auto;
    margin-left: 1%;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    .title {
      font-size: 20px;
      padding-left: 15px;
      margin-bottom: 20px;
      color: #333;
      height: 40px;
      line-height: 40px;
      background: #ebedf8;         
    }
  }
  .right-part {
    width: 98%;
    margin-left: 1%;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    padding-bottom: 20px;
    .title {
      font-size: 20px;
      padding-left: 15px;
      margin-bottom: 10px;
      color: #333;
      height: 40px;
      line-height: 40px;
      background: #ebedf8;
      .tishi {
        color: #FF9966;
        font-size: 14px;
        margin-left:35px;
      }
    }
    .box-border {
      border: 1px solid #ccc;
      padding: 10px 5px;
    }
  }
}
.btn-group {
    padding: 20px 0;
    text-align: center;
  }
.btn {
    min-width: 80px;
    height: 35px;
  }
.upload-wrapper {
  display: flex;
  align-items: center;
  clear: both;
  .upload-part {
    display: flex;
    position: relative;
    align-items: center;
    flex-wrap:wrap;
    .demo-upload-list {
      display: inline-block;
      width: 90px;
      height: 90px;
      text-align: center;
      line-height: 90px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      margin-right: 4px;
    }
    // 关闭input文本框自动填充背景色黄色
    input:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset !important;
    }

    .demo-upload-list img {
      width: 100%;
      height: 100%;
    }
    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
    .demo-upload-list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }
  }
  label {
    text-align: right;
    padding: 10px 0px 10px 0;
  }
}
.mock-require {
  /deep/ label:before {
    content: "*";
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ed3f14;
  }
}
.shenhe-vertical-center-modal {
  /deep/ .ivu-modal-footer {
    display: none;
  }
}
</style>

